<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="60%" :title="drawerTitle">
            <Row>
                <Col>
                    <Row>
                        <Form ref="planForm" :model="form" :label-width="70" :rules="formValidate" style="position:relative">
                            <FormItem label="计划名称" prop="planName">
                                <Input v-model="form.planName" style="width:600px"/>
                            </FormItem>
                            <FormItem label="开始时间" prop="starTime" >
                                <DatePicker type="datetime" @on-change="dataChange" :value="form.starTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间" style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="结束时间" prop="endTime" >
                                <DatePicker type="datetime" @on-change="dataChange2" :value="form.endTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间" style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="选择课程" prop="courseIds">
                                <course-choose buttonText="选择课程" @on-change="handleSelectCourse" ref="course"></course-choose>
                            </FormItem>
                            <FormItem label="选择员工" prop="userIds">
                                <user-choose buttonText="选择员工" :userType="userType" @on-change="handleSelectUser" ref="user"></user-choose>
                            </FormItem>
                            <!--<FormItem label="选择部门" prop="deptIds">
                                <dept-choose buttonText="选择部门" @on-change="handleSelectDept" ref="dept"></dept-choose>
                            </FormItem>-->
                            <Form-item class="br">
                                <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                <Button @click="handelCancel">取消</Button>
                            </Form-item>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </Form>
                    </Row>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {addPlan, complanInfo, editPlan} from "@/api/bus";
    import userChoose from "../../my-components/flyme/staff-choose";
    import deptChoose from "../../my-components/flyme/dept-choose";
    import courseChoose from "../../my-components/flyme/course-choose";
    // 表情包配置 自定义表情可在该js文件中统一修改


    let editor = null;
    var xss = require("xss");
    export default {
        name: "live-drawer",
        components: {
            userChoose,
            deptChoose,
            courseChoose
        },
        data() {
            return {
                type: 0,
                userType: "UT_STUDENT",
                loading: false, // 表单加载状态
                selectUsers: [],
                selectDepts: [],
                selectCourses: [],
                drawerTitle: "添加计划",
                drawerVisible: false,
                form: {
                    planName: "",
                    starTime: "",
                    endTime: "",
                    userIds: "",
                    deptIds: "",
                    courseIds: ""
                },
                formValidate: {
                    planName: [{required: true, message: "计划名称不能为空", trigger: "blur"}],
                    starTime: [{required: true, message: "开始时间不能为空", trigger: "blur"}],
                    endTime: [{required: true, message: "结束时间不能为空", trigger: "blur"}]
                },
                submitLoading: false // 添加或编辑提交状态
            };
        },
        methods: {
            init() {

            },
            showDrawer(params) {
                if (params.id) {
                    this.type = 1;
                    this.drawerTitle = "编辑计划";
                    this.form.id = params.id;
                    this.getData();
                } else {
                    this.$refs.planForm.resetFields();
                    this.drawerTitle = "添加计划";
                    this.type = 0;
                }
                this.drawerVisible = true;
            },
            //打开用户选择
            showUserChooseDrawer() {
                this.$refs.user.showDrawer();
            },
            clearUser() {
                this.$refs.user.clearSelectUser();
            },
            getData() {
                this.loading = true;
                complanInfo(this.form.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.form = res.data;
                    }
                });
            },
            dataChange(data1, data2) {
                this.form.starTime = data1;
            },
            dataChange2(data1, data2) {
                this.form.endTime = data1;
            },
            handelSubmit() {
                this.$refs.planForm.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.type === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.form.id;
                            // 用户id数据
                            let ids = [];
                            this.selectUsers.forEach(e => {
                                ids.push(e.id);
                            });
                            this.form.userIds = ids;
                            let depts = [];
                            this.selectDepts.forEach(e => {
                                depts.push(e.id);
                            });
                            this.form.deptIds = depts;
                            let courses = [];
                            this.selectCourses.forEach(e => {
                                courses.push(e.id);
                            });
                            this.form.courseIds = courses;
                            addPlan(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        } else if (this.type === 1) {
                            // 编辑
                            editPlan(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        }
                    }
                });
            },
            handleSelectUser(v) {
                this.form.userIds = v[0].id;
                this.selectUsers = v;
            },
            handleSelectDept(v){
                this.form.deptIds = v[0].id;
                this.selectDepts = v;
            },
            handleSelectCourse(v){
                this.form.courseIds = v[0].id;
                this.selectCourses = v;
            },
            handelCancel() {
                this.drawerVisible = false;
            }
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>